h1, h2, h3, h4, h5, h6 { 
  /* font-family: 'Verdana' !important; */
  font-family: "lato", sans-serif !important;
}

h3 { font-weight: bold !important; }

p, ul {
  /* font-family: 'Verdana' !important; */
  font-size: 18px;
}

.header-tag {
  position: absolute;
  top: -200px;
  left: -200px;
}

.media-body .info { font-size: 14px; }

img {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

img.logo {
  margin-top:6px;
  margin-left:0px;
}

.thumbnail {
  border: 2px solid #c4c4e4 !important;
  border-radius: 8px !important;
  min-height: 35em;
}

nav.navbar.navbar-default {
  background:#ffffff;
}

a.navlink {
  /* font-family: 'Verdana' !important; */
  font-family: 'Lato' !important;
  font-size:medium;  
}

.form-group > label {
  font-size:small;
  font-weight:300;
}

.form-group > input[type="text"], input[type="email"], input[type="password"] {
  font-family: 'Verdana' !important; font-size: 16px;
  font-weight:300;
  color:#0000ff;
}

.form-group > input[type="password"] {
  font:small-caption;
  font-size:12px;
  letter-spacing: 2px;
}

.form-group > input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'Verdana' !important; font-size: 14px;
  font-weight:300;
  color:#a0a0a0;
  letter-spacing:0;
}
.form-group > input::-moz-placeholder { /* Firefox 19+ */
  font-family: 'Verdana' !important; font-size: 14px;
  font-weight:300;
  color:#a0a0a0;
  letter-spacing:0;
}
.form-group > input:-ms-input-placeholder { /* IE 10+ */
  font-family: 'Verdana' !important; font-size: 14px;
  font-weight:300;
  color:#a0a0a0;
  letter-spacing:0;
}
.form-group > input:-moz-placeholder { /* Firefox 18- */
  font-family: 'Verdana' !important; font-size: 14px;
  font-weight:300;
  color:#a0a0a0;
  letter-spacing:0;
}


div#curve-div {
  position:relative;
  margin-top:-20px;
}

p#curve-tag {
  // font-weight:700;
  color:#ffffff;
  position:absolute;
  z-index:100;
  // font-weight:700;
  top:3%;
  text-align:center;
  width:100%;
}

img#curve {
  margin-top:-20px; 
  margin-bottom:20px;
  width:100%;
}

img#world {  
  transform: scaleY(0.80);
  width:100%;
  margin-top:-5%; 
}
img#sph {
  margin: 5em auto 5em auto;
  max-width: 80%;
}

div#home-div {
  position:relative;
  text-align: center;  
}

div#acct {
  position: relative;
  display: block;
  margin: 30px auto;
  padding: 0;
  max-width: 420px;
}

div#acct .col-md-6 {
  width: 100%;
}

hr {
 height:1px; 
 border:none; 
 color:#606060; 
 background-color:#606060; 
}

footer {
  width:100%;
  bottom:0;
  position:fixed;
  background:#ffffff;
}

@media all {
    /* sets the base font size for all user agents that support media queries */
    // p {font-size: 16px;}
    p#curve-tag {
      font-size: 22px;
      font-weight:900;
    }
}

@media screen and (min-width: 480px) {
    /* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
    // p {font-size: 15.5px;}
    p#curve-tag {
      font-size: 32px;
      font-weight:700;
    }
    img#services { width:100%;}
}

@media screen and (min-width: 680px) {
    /* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
    // p {font-size: 15px;}
    p#curve-tag {
      font-size: 44px;
      font-weight:700;
    }
}

/*
SEE: // https://octobercms.com/forum/post/using-flash-on-frontend-like-we-use-it-on-backend?page=1
*/
.flash-message {
  position: fixed;
  width: 500px;
  left: 50%;
  margin-top: 30%;
  margin-left: -250px;
  color: #ffffff;
  font-size: 13px;
  padding: 10px 30px 10px 15px;
  z-index: 10000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

.flash-message.fade {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s,width 0s;
  transition: all 0.5s,width 0s;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9)
}

.flash-message.fade.in {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

.flash-message.success {background: #8da85e}
.flash-message.error {background: #cc3300}
.flash-message.warning {background: #f0ad4e}
.flash-message.info {background: #5fb6f5}

.flash-message button {
  float: none;
  position: absolute;
  right: 10px;
  top: 8px;
  color: white
}

.flash-message button:hover {color: white}

.flash-message.static {
  position: static !important;
  width: auto !important;
  display: block !important;
  margin-left: 0 !important
}